<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>注册</title>
  <link rel="stylesheet" href="../../libs/layui-v2.5.5/layui/css/layui.css">
  <link rel="stylesheet" href="../../css/public.css">
  <style>
    .layui-input-block,.layui-input-inline{
      margin-left: 0 !important;
      left: 0 !important;
    }
    .layui-btn{
      width: 100%;
      padding: 0;
    }
    form{
        height: 430px;
    }
  </style>
</head>
<body>
    <div class="box1 layui-container p0 bgD7 mAuto">
      <div class="bgSystem w100 h145"></div>
    </div>
    <div class="layui-row">
        <form class="layui-form bordereee boxShadoweee bgfff radius10 layui-col-xs10 layui-col-xs-offset1 mt-15 p15" action="">
            <p class="font24 bold">注 册</p>
            <div class="layui-form-item mt25">
              <div class="layui-input-block">
                <input type="text" name="nickname" required  lay-verify="nickname" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-inline">
                <input type="text" name="mobile" required  lay-verify="userPhone" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item mt15 layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-input-block">
                        <input type="text" name="mobileCheckCode" required  lay-verify="code" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-xs5 pl20">
                    <div class="layui-input-block">
                        <input type="button" class="layui-btn font12 bgSystem" id="code" value="获取验证码" onclick="codeButton()">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-inline">
                <input type="password" name="userPassword" lay-verify="pass" placeholder="密码长度需在6-12位字符之间" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="password" name="confirmPwd" lay-verify="surePass" placeholder="请确认密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <input type="text" name="invitationPhone" required  lay-verify="invitationPhone" placeholder="请输入邀请人手机号码" autocomplete="off" class="layui-input color333">
              </div>
            </div>
            <a class="alignR color666 h40 block" href="./login.html">
              已有账号，去登录
            </a>
            <div class="layui-form-item mt20">
              <div class="layui-input-block">
                <button class="layui-btn bgSystem" lay-submit lay-filter="formDemo">注 册</button>
              </div>
            </div>
          </form>
    </div>
<script src="../../libs/jquery-v1.11.3.min.js"></script>
<script src="../../libs/layui-v2.5.5/layui/layui.js"></script>
<script src="../../libs/publicCookie.js"></script>
<script src="../../libs/public.js"></script>
<script>    
   layui.use(['layer', 'form','jquery'], function(){
        var layer = layui.layer,
            form = layui.form,
            $ = layui.$;
        
            if(window.location.href.indexOf('invitationPhone')!=-1){
              $('input[name="invitationPhone"]').val(window.location.href.split('invitationPhone=')[1].substring(0, 11));
              $('input[name="invitationPhone"]').attr('disabled','disabled');
            }
        
        //表单验证
        form.verify({
          nickname: function(value, item){ 
            if(!value){ 
              return '请输入您的真实姓名';
            } 
          },
          userPhone: function(value, item){ 
            if(!(/^1[3456789]\d{9}$/.test(value))){ 
              return '请输入正确的手机号码';
            } 
          },
          invitationPhone: function(value, item){ 
            if(!(/^1[3456789]\d{9}$/.test(value))){ 
              return '请输入正确的邀请人手机号码';
            } 
          },
          code: function(value, item){ 
            if(!(value)){ 
              return '请输入验证码';
            } 
          },
          pass: [
            /^[\S]{6,12}$/
            ,'密码必须6到12位，且不能出现空格'
          ],
          surePass: function(value, item){ 
            if(value!=$('input[name="userPassword"]').val()){ 
              return '两次密码输入的不一致';
            } 
          },
        }); 
        //监听提交
        form.on('submit(formDemo)', function(data){
            $.ajax({
                type: 'post',
                url:link+'/mobile/register',
                data:data.field,
                dataType: 'json',
                success: function (res) {
                    if(res.success){
                        //保存cookie
                        SetCookieDomain('token',res.entity.token,'');
                        SetCookieDomain('nickname',res.entity.nickname,'');
                        SetCookieDomain('mobile',res.entity.mobile,'');
                        let proId=GetCookie('proId');
                        $.ajax({
                          type: 'post',
                          url:link+'/mobile/verifyMessage',
                          data:{
                            'token':res.entity.token
                          },
                          async:false,
                          dataType: 'json',
                          success: function (data) {
                            if(data.code==10021){
                              layer.msg('登录成功',{icon:6,time:600},function(){
                                window.location.href="../../index.html"
                              });
                            }else{
                              layer.msg(res.message);
                            }
                          },
                          error:function(data){
                            layer.msg(data.message);
                          },
                        });
                    }else{
                        layer.msg(res.message);
                    }
                },
                error:function(res){
                    layer.msg(res.message);
                },
            });
            return false;
        });
    });
    //获取验证码
    function codeButton(){
        let ajaxKeyData={
            'mobile':$('input[name="mobile"]').val(),
            'mobileType':'Android'
        };
        //第一步获取key
        if(!(/^1[3456789]\d{9}$/.test(ajaxKeyData.mobile))){ 
            layer.msg('请输入正确的手机号码');
        }else{
            $.ajax({
                type: 'post',
                url:link+'/mobile/getMobileKey',
                data:ajaxKeyData,
                dataType: 'json',
                success: function (res) {
                    if(res.success){
                        //第二步获取验证码
                        let ajaxCodeData={
                            'mobile':$('input[name="mobile"]').val(),
                            'sign':res.entity,
                            'sendType':'register',
                            'mobileType':'Android'
                        }
                        $.ajax({
                            type: 'post',
                            url:link+'/mobile/sendMobileMessage',
                            data:ajaxCodeData,
                            dataType: 'json',
                            success: function (data) {
                                if(res.success){
                                    layer.msg(data.message);
                                    var code = $("#code");
                                    code.attr("disabled","disabled");
                                    setTimeout(function(){
                                        code.css("opacity","0.8");
                                    },1000)
                                    var time = 60;
                                    var set=setInterval(function(){
                                    code.val("("+--time+")秒后重新获取");
                                    }, 1000);
                                    setTimeout(function(){
                                    code.attr("disabled",false).val("重新获取验证码");
                                    clearInterval(set);
                                    }, 60000);
                                }else{
                                    layer.msg(data.message);
                                }
                            },
                            error:function(res){
                                layer.msg(data.message);
                            },
                        });
                    }else{
                        layer.msg(res.message);
                    }
                },
                error:function(res){
                    
                },
            });
        }
    }
</script>
</body>
</html>